<template>
  <el-card class="box-card">
    <h2 class="titleHeader">图书分类</h2>
    <div class="classifyHeader">
      <button class="icon-btn add-btn" @click="addLableHandle">
        <div class="add-icon"></div>
        <div class="btn-txt">新增</div>
      </button>
      <div style="display: flex; margin-bottom: 30px">
        <el-input
          v-model="searchLable"
          class="w-50 m-2"
          placeholder="搜索标签"
          :prefix-icon="Search"
        />
      </div>
    </div>
    <!-- 表格 -->
    <LableTable :lableData="lableData"></LableTable>
  </el-card>
</template>

<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, defineAsyncComponent, inject, computed } from 'vue'
import { addLableData } from '@/utils/articleHttp'
// 全局状态
const store: any = inject('store')
store.GetLableData()
const searchLable = ref('')

// 计算属性给表格传入数据
const lableData = computed(() => {
  return (store.state.lableData as any[]).filter((item) =>
    (item.labelName as string).includes(searchLable.value)
  )
})

const LableTable = defineAsyncComponent(
  () => import('@/components/article/LableTable.vue')
)

// 添加标签
const addLableHandle = (): void => {
  ElMessageBox.prompt('添加标签', 'Tip', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    inputPattern: /^.{1,6}$/,
    inputErrorMessage: '标签名只能1-6位',
  }).then(({ value }) => {
    addLableData(value)
      .then((res) => {
        if (res.data.ok) {
          ElMessage.success(res.data.info)
          store.PushLableData(res.data.data)
        } else ElMessage.error(res.data.info)
      })
      .catch((err) => ElMessage.error('服务器错误'))
  })
}
</script>

<style lang="scss" scoped>
.classifyHeader {
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px auto 10px;
  padding-left: 10px;

  .icon-btn {
    width: 25px;
    height: 25px;
    border: 1px solid #cdcdcd;
    background: white;
    border-radius: 25px;
    overflow: hidden;
    position: relative;
    transition: width 0.2s ease-in-out;
    font-weight: 500;
    font-family: inherit;
  }

  .add-btn:hover {
    width: 80px;
  }

  .add-btn::before,
  .add-btn::after {
    transition: width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
    content: '';
    position: absolute;
    height: 3px;
    width: 6px;
    top: calc(50% - 2px);
    background: #0081ff;
  }

  .add-btn::after {
    right: 14px;
    overflow: hidden;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
  }

  .add-btn::before {
    left: 14px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
  }

  .icon-btn:focus {
    outline: none;
  }

  .btn-txt {
    opacity: 0;
    transition: opacity 0.2s;
  }

  .add-btn:hover::before,
  .add-btn:hover::after {
    width: 0px;
  }

  .add-btn:hover .btn-txt {
    opacity: 1;
  }

  .add-icon::after,
  .add-icon::before {
    transition: all 0.2s ease-in-out;
    content: '';
    position: absolute;
    height: 15px;
    width: 2px;
    top: 4px;
    background: #0081ff;
    overflow: hidden;
  }

  .add-icon::before {
    left: 10px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
  }

  .add-icon::after {
    right: 10px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
  }

  .add-btn:hover .add-icon::before {
    height: 0;
  }

  .add-btn:hover .add-icon::after {
    height: 0;
  }
}
</style>
